<template>
	<div>
		<!-- 头部 -->
		<el-row style="text-align: right;">
			<router-link to="/cms/article/platform/publisharticle">
				<el-button type="primary">发布文章</el-button>
			</router-link>
		</el-row>
		<div class="m-b-20 ovf-hd">
			<div>
				<search-model :config="config.search" :data="data"></search-model>
			</div>
		</div>
		<transition name="fade" mode="out-in" appear>
			<table-model v-loading="showLoading" :Edit="Edit" :tableData="data.received.table" :config="config.table" :exchanged="data.exchanged" :baseApi="config.baseApi"></table-model>
		</transition>

		<!-- 底部 -->
		<div class="pos-rel p-t-20">
			<!-- 翻页操作 -->
			<page-model :data="data" :config="config.page" :dataCount="data.received.count" :limit="data.exchanged.search.limit" :currentPage="data.exchanged.search.page"></page-model>
			<div class="m-b-20 ovf-hd">
				<!-- 导出Excel表格 -->
				<downExcel :baseApi="config.baseApi" :config="config.excel" :tableData="data.received.table" :conditions="data.exchanged.search"></downExcel>
			</div>
		</div>

	</div>
</template>

<script>
	import http from 'assets/js/http.js'
	import downExcel from 'components/Common/down-excel.vue'
	import tableModel from 'components/Common/table-modelUpId.vue'
	import searchModel from 'components/Common/search-model.vue'
	import pageModel from 'components/Common/page-model.vue'

	export default {
		components: {
			downExcel,
			tableModel,
			searchModel,
			pageModel
		},
		data() {
			return {
				Edit: {
					dialogFormVisible: false,
					data: {
						primary: '',
						form: {
							CellPhone: null,
						},
						selectData: []
					},
					config: {
						uploadUrl: axios.defaults.baseUR + 'admin/upload',
						domain: axios.defaults.baseUR,
						title: '编辑用户信息',
						form: {
							input: [{
								prop: 'CellPhone',
								label: '手机号'
							}],
							select: [],
							uploadImg: []
						},
						rules: {

						}
					}
				},
				config: {
					baseApi: 'AdminApi/Article/list',
					excel: {
						fileName: '用户列表',
						tHeader: [
							'用户ID',
							'用户名',
							'头像',
							'性别',
							'联系电话',
							'推荐人ID',
							'邀请码',
							'QQ',
							'微信',
							'注册时间',
						],
						filterVal: [
							'id',
							'username',
							'photo',
							'sex',
							'contact_number',
							'type',
							'invite_code',
							'type',
							'type',
							'regist_time',
						],
					},

					table: {
						noGroup: false,
						checkbox: false,
						status: false,
						xiangqing: false,
						index: true,
						sort: {
							CreateDate: 'custom'
						},
						show: {
							prop: [
								'time',
								'title',
								'view_number',
								'username',
							],
							items: [
								'发布日期',
								'发布标题',
								'浏览量',
								'发布账号',
							],
							width: []
						},
						operate: {
							link: [{
								name: '平台文章发布',
								title: '查看',
								class: 'rewardRecord',
								svg: true
							}],
							forbidden: {},
							totop: {}
						}

					},
					search: {
						search_input: [{
							name: 'name',
							placeholder: '标题'
						}, ],
						search_select: [],
						date: [{
							name: 'addtime',
							type: 'date'
						}]
					},
					page: {
						limits: [5, 10, 20, 50, 100],
						layout: 'total, sizes, prev, pager, next, jumper'
					}
				},
				data: {
					received: {
						table: [],
						count: null,
						search: {
							
						}
					},
					exchanged: {
						search: {
							limit: 10,
							page: 1,
							orderByString: '',
							type: 3,
							addtime: ''
						},
						multipleSelection: [],
						isDelete: 0,
						date: {
							addtime: ''
						}
					}
				}
			}
		},
		created() {
			this.init()
			// 延迟绑定监听
			this.$watch('data.exchanged.search', {
				deep: true,
				handler: function() {
					router.push({
						path: this.$route.path,
						query: this.getCondition()
					})
					_g.openGlobalLoading()
					this.tableData()
				}
			})
			this.$watch('data.exchanged.isDelete', {
				deep: true,
				handler: function() {
					_g.openGlobalLoading()
					this.tableData()
				}
			})
		},
		methods: {
			init() {
				// 基本数据获取
				this.tableData()
			},
			tableData() {
				//				 表格数据
//				const data = {
//					params: this.getCondition()
//				}
				const data = this.getCondition()
				// 请求地址
				let url = this.config.baseApi
				this.apiPost(url, data).then(res => {
					console.log('列表res', res)
					this.handelResponse(res, data => {
						data.map(function(i) {

						})
						this.data.received.table = data
						this.data.received.count = data.length
						_g.closeGlobalLoading()
					})
				})
			},
			getCondition() {
				// 搜索优化配置
				let temp = this.data.exchanged.search
				let params = {}
				for(let key in temp) {
					if(temp[key]) {
						params[key] = temp[key]
					}
				}
				return params
			},

			handleAvatarSuccess(res, file) {
				this.Add.data.form[this.Add.config.form.uploadImg.prop] = res.data
				// this.imageUrl =
			},
			beforeAvatarUpload(file) {
				const isLt2M = file.size / 1024 / 1024 < 2
				if(!isLt2M) {
					this.$message.error('上传图片大小不能超过 2MB!')
				}
				return isLt2M
			}
		},
		mixins: [http]
	}
</script>

<style scoped>
	.el-input,
	.el-input__inner {
		width: auto;
	}
</style>